<template>
	<view>
		<view style="width:auto;height:auto;">
			<image class="customImgSubCss" mode="scaleToFill" :src="seriesBase.imagePath" />
		</view>
		<view class="content">
			<text style="font-weight: bold;">简介：</text>
		</view>
		<view class="contentText">
			<text>{{seriesBase.introduce}}</text>
			<text v-if="seriesBase.introduce == null">暂无介绍</text>
		</view>
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="customButtonGroup"
				@buttonClick="addToMyWorks" />
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			addToMyWorks(e) {
				if(e.index == 0){
					uni.navigateTo({
						url: "../my_works/my_works"
					})
				}else{
					uni.setStorage({
						key: "-" + this.seriesBase.id.toString(),
						data: {
							id: -this.seriesBase.id,
							worksName: this.seriesBase.worksName,
							imagePath: this.seriesBase.imagePath
						},
						success: () => {
							this.utilList.scToast()
						}
					})
				}
			}
		},
		data() {
			return {
				seriesBase: {},
				customButtonGroup: [{
						text: '我的作品',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '加入我的作品',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				options: []
			}
		},
		onLoad() {
			this.seriesBase = this.$store.state.tempSeriesDetails
		},
	}
</script>

<style>
	.contentText {
		margin: 0 2vw 0 2vw;
		text-indent: 2em;
		word-wrap: break-word;
		font-size: 4vw;
	}

	.content {
		font-size: 5vw;
		margin: 2vh 2vw 0 2vw;
	}

	.goods-carts {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		left: var(--window-left);
		right: var(--window-right);
		bottom: 0;
	}

	.customImgSubCss {
		display: block;
		margin: 0 auto;
		margin-top: 2vh;
		width: 330px;
		height: 330px;
		border-radius: 50%;
	}
</style>
